<template>
  <div class="app-container">
    <a @click="goHome()" >home </a>
    <a v-for="path in paths" @click="fetchData(path.id,path.name)" >
      {{ path.name }} >
    </a>
    <el-row :gutter="2">
      <el-col :span="2">
        <el-upload
          class="upload-demo"
          action="http://localhost:8093/fs/upload"
          :data="uploadFile"
          :on-success="successUpload"
          :before-upload="beforeUpload">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small"  @click="createDirDialog()">新增目录</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small"  @click="lockOrUnLock()">{{lockButtonVal}}</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small" v-show="selected" @click="showMove()">移动</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small" v-show="selected" @click="showCopy()">复制</el-button>
      </el-col>

    </el-row>
    <el-table
      ref="singleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="名称" >
        <template slot-scope="scope">
          <i v-if="scope.row.locked==true" class="el-icon-lock"></i>
          <a style='color: burlywood;' v-if="scope.row.type=='directory'" @click="fetchData(scope.row.id,scope.row.name)" >
            <img :src="folderIcon"  style="width:20px; height:20px"> {{ scope.row.name }}</a>
          <el-link v-else  type="primary" @click="viewData(scope.row.id,scope.row.name)">
          <img v-if="scope.row.name.indexOf('.pdf')>0" :src="pdfIcon"  style="width:20px; height:20px">
          <img v-if="scope.row.name.indexOf('.docx')>0" :src="wordIcon"  style="width:20px; height:20px">
          <img v-if="scope.row.name.indexOf('.png')>0" :src="picIcon"  style="width:20px; height:20px">
          <img v-if="scope.row.name.indexOf('.mp4')>0" :src="videoIcon"  style="width:20px; height:20px">
          {{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="大小" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.size>(1024*1024)"  >{{ Math.round(scope.row.size/(1024*1024))}}MB</span>
          <span v-else  >{{ Math.round(scope.row.size/1024)}}KB</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.updatedBy.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
           <a style='color: burlywood;' v-if="scope.row.type!='directory'"  @click="downLoadData(scope.row.id,scope.row.name)" >| 下载</a>
           <a style='color: burlywood;' @click="removeData(scope.row.id)" > | 删除</a>
           <a style='color: burlywood;' @click="showRenameDialog(scope.row.id,scope.row.name)" > | 重命名</a>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="文件夹名" label-width="100px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="exec()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="treeFormVisible"
          v-if="treeFormVisible" >
      <el-tree :data="treeData"
          :props="defaultProps"
          :load="loadNode"
          ref="tree"
          lazy
          @node-click="handleNodeClick">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="treeFormVisible = false">取 消</el-button>
        <el-button v-if="moveSwitch" type="primary" @click="doMove()">移动</el-button>
        <el-button v-if="!moveSwitch" type="primary" @click="doMove()">移动</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { remove } from '@/api/table'
import { downLoad } from '@/api/table'
import { Base64 } from 'js-base64';
import { createDirectory } from '@/api/table'
import { rename } from '@/api/table'
import { unlock } from '@/api/table'
import { lock } from '@/api/table'
import { folder } from '@/api/table'
import { move } from '@/api/table'
import { copy } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      treeData:[],
      pdfIcon: require('@/assets/icons/file_pdf.png'),
      folderIcon: require('@/assets/icons/public_folder.png'),
      wordIcon: require('@/assets/icons/file_word.png'),
      picIcon: require('@/assets/icons/file_pic.png'),
      videoIcon: require('@/assets/icons/file_video.png'),
      list: null,
      listLoading: true,
      paths:[],
      uploadFile:{},
      mount:0,
      dialogFormVisible: false,
      treeFormVisible: false,
      selected: false,
      id:null,
      form:{"name":"","type":0},
      lockButtonVal:"锁定",
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      selectTreeId:null,
      moveSwitch:false,
      selectFolderId:null
    }
  },
  created() {
    this.mount = this.$route.meta.mount
    this.fetchData()
  },
  methods: {
    init(){
       this.fetchData(this.id,this.name)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '企业网盘',id:-1}]);
      }
      if (node.level >0 ) {
        let par = {"mount":this.mount,"id":node.data.id}
        folder(par).then(response => {
          resolve(response.data);
        })
      }
    },
    doMove(){
      console.log(this.currentRow.id)
      let par = {"documentIds":[this.currentRow.id],"parent":this.selectFolderId}
      move(par).then(response => {
        this.treeFormVisible = false
        init()
      })
    },
    showCopy(){
      this.moveSwitch = false
      this.treeFormVisible = true
    },
    showMove(){
      this.moveSwitch = true
      this.treeFormVisible = true
    },
    handleNodeClick(data) {
      this.selectFolderId = data.id
      console.log(113,data.id)
    },
    createDirDialog(){
      this.form.type = 0
      this.form.name = ""
      this.dialogFormVisible = true
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      if (this.currentRow){
        this.selected = true
        if (val.locked){
          this.lockButtonVal = "解锁"
        }else{
          this.lockButtonVal = "锁定"
        }
      }else{
        this.selected = false
      }
    },
    lockOrUnLock(){
      if (!this.currentRow){
          this.$message({
            type: 'warning',
            message: '请先选中行'
          });
        return;
      }
      console.log(this.currentRow)
      let par = {"documentIds":[this.currentRow.id]}
      if ( this.currentRow.locked){
        unlock(par).then(response => {
          this.init()
        })
      }else{
        lock(par).then(response => {
          this.init()
        })
      }
    },
    exec(){
      if (this.form.type==0){
        let par = {"name":this.form.name,"parent":this.id}
        par.mount = this.mount
        createDirectory(par).then(response => {
          this.dialogFormVisible = false
          this.init()
        })
      }else {
        let par = {"name":this.form.name,"id":this.form.id}
        par.mount = this.mount
        rename(par).then(response => {
          this.dialogFormVisible = false
          this.init()
        })
      }
    },
    showRenameDialog(id,name){
      this.form.type = 1
      this.form.id = id
      this.form.name = name
      this.dialogFormVisible = true
    },
    goHome(){
      this.paths.length = 0;
      this.fetchData()
    },
    beforeUpload(file) {
      this.uploadFile.name = file.name;
      this.uploadFile.size = file.size;
      this.uploadFile.md5 = "abc";// todo
      this.uploadFile.mount = this.mount;
      this.uploadFile.parent = this.id;
      console.info(file);
    },
    successUpload(){
      this.fetchData(this.id,this.name)
    },
    fetchData(id,name) {
      for(var i=0;i<this.paths.length;i++){
        if (this.paths[i].id && this.paths[i].id==id){
          this.paths = this.paths.splice(0,i);
        }
      }
      this.paths.push({"id":id,"name":name})
      this.id = id
      this.name = name

      let par = {"id":id}
      par.mount = 2
      if ( !id ){
         //par = null;
      }
      par.mount = this.mount
      this.listLoading = true
      getList(par).then(response => {
        this.list = response.data.files
        this.listLoading = false
      })
    },
    removeData(id) {
      this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let par = {"documentIds":[id]}
          remove(par).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.fetchData(this.id,this.name)
          })
        }).catch(() => {
        });
    },
    viewData(id,name){
      let path = Base64.encode(`http://192.168.99.59:8093/fs/download?id=${id}&token=${this.$store.getters.token}&fullfilename=${name}`);
      path = encodeURIComponent(path)
      window.open("http://192.168.99.13:8012/onlinePreview?url=" + path);
    },
    downLoadData(id,name) {
      window.open(`http://192.168.99.59:8093/fs/download?id=${id}&fullfilename=${name}`);
    }
  }
}
</script>
